.df img {
	position: relative;
	top: 0;
	left: 0;
}
.df div.frame {
	position: absolute;
	top: 0;
	left: 0;
	border: 0px solid transparent;
}
.df div.bg {
	position: absolute;
	top: 0;
	left: 0;
	border: 0px solid transparent;
}
body li .df em {
	width: 100%;
}

/**
 * Polaroid frame.
 */
.polaroid div.frame {
	top: -8px;
	left: -8px;
	border-width: 8px 8px 25px;
	border-image: url(../frames/polaroid.png) 8 8 25;
	-moz-border-image: url(../frames/polaroid.png) 8 8 25;
	-webkit-border-image: url(../frames/polaroid.png) 8 8 25;
}
.polaroid em {
	top: 1px;
}

/**
 * Black frame.
 */
.black-frame div.frame {
	top: -20px;
	left: -20px;
	border-width: 20px 20px 35px;
	border-image: url(../frames/black-frame.png) 20 20 35;
	-moz-border-image: url(../frames/black-frame.png) 20 20 35;
	-webkit-border-image: url(../frames/black-frame.png) 20 20 35;
}
.black-frame em {
	top: 1px;
}

/**
 * Grung frame.
 */
.grung div.frame {
	top: -10px;
	left: -10px;
	border-width: 10px 10px 30px;
	border-image: url(../frames/grung.png) 10 10 30;
	-moz-border-image: url(../frames/grung.png) 10 10 30;
	-webkit-border-image: url(../frames/grung.png) 10 10 30;
}
.grung em {
	top: 1px;
}

/**
 * Brush frame.
 */
.brush div.frame {
	top: -8px;
	left: -8px;
	border-width: 8px;
	border-image: url(../frames/brush.png) 8;
	-moz-border-image: url(../frames/brush.png) 8;
	-webkit-border-image: url(../frames/brush.png) 8;
}
.brush em {
	top: 8px;
}

/**
 * Mask frame.
 * Not working with chrome :(
 */
.mask div.frame {
	border-width: 0;
	border-image: url(../frames/mask.png) 0;
	-moz-border-image: url(../frames/mask.png) 0;
	-webkit-border-image: url(../frames/mask.png) 0;
}
.mask em {
	top: 1px;
}

/**
 * Cut-Corner frame.
 */
.cut-corner div.frame {
	top: -10px;  /** - border width + img margin **/
	left: -10px; /** - border width + img margin **/
	border-width: 5px;
	border-image: url(../frames/cut-corner.png) 5;
	-moz-border-image: url(../frames/cut-corner.png) 5;
	-webkit-border-image: url(../frames/cut-corner.png) 5;
}
.cut-corner em {
	top: 5px;
}
/**
 * It would be better to include  
 * the border in the frame image.
 */
body .cut-corner img {
	background: #fff;
	border: solid 1px #ccc;
	padding: 4px;
	margin: -5px;
}

/**
 * Watercolor frame.
 */
.watercolor div.frame {
	top: -14px;
	left: -14px;
	border-width: 14px;
	border-image: url(../frames/watercolor.png) 14;
	-moz-border-image: url(../frames/watercolor.png) 14;
	-webkit-border-image: url(../frames/watercolor.png) 14;
}
.watercolor em {
	top: 14px;
}

/**
 * Gold frame.
 */
.gold-frame div.frame {
	top: -22px;
	left: -22px;
	border-width: 22px 22px 24px;
	border-image: url(../frames/gold-frame.png) 22 22 24;
	-moz-border-image: url(../frames/gold-frame.png) 22 22 24;
	-webkit-border-image: url(../frames/gold-frame.png) 22 22 24;
}
.gold-frame em {
	top: 22px;
}

/**
 * Stamp frame.
 * Not working with chrome :(
 */
.stamp div.frame {
	border-width: 0px;
	border-image: url(../frames/stamp.png) 0;
	-moz-border-image: url(../frames/stamp.png) 0;
	-webkit-border-image: url(../frames/stamp.png) 0;
}
.stamp div.bg {
	top: -7px;
	left: -7px;
	border-width: 7px;
	border-image: url(../frames/stamp-bg.png) 7;
	-moz-border-image: url(../frames/stamp-bg.png) 7;
	-webkit-border-image: url(../frames/stamp-bg.png) 7;
}
.stamp em {
	top: 4px;
}

/**
 * Round-Corner frame.
 * Not working with chrome :(
 */
.round-corner div.frame {
	border-width: 0px;
	border-image: url(../frames/round-corner.png) 0;
	-moz-border-image: url(../frames/round-corner.png) 0;
	-webkit-border-image: url(../frames/round-corner.png) 0;
}
.round-corner div.bg {
	top: -8px;
	left: -8px;
	border-width: 8px;
	border-image: url(../frames/round-bg.png) 8;
	-moz-border-image: url(../frames/round-bg.png) 8;
	-webkit-border-image: url(../frames/round-bg.png) 8;
}
.round-corner em {
	top: 5px;
}
